﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}

<body>
    <div id="app">
        <template>
            <el-input v-model="cardId" placeholder="请输入搜索的ID"></el-input>
            <el-button type="primary" v-on:click="findPersonById">搜索信息</el-button>
            <el-table :data="tableData.filter(data => !search || data.s_name.toLowerCase().includes(search.toLowerCase()))"
                      style="width: 100%">
                <el-table-column sortable
                                 prop="s_id"
                                 label="id">
                </el-table-column>
                <el-table-column sortable
                                 prop="s_name"
                                 label="姓名">
                </el-table-column>
                <el-table-column prop="s_sex"
                                 label="性别">
                </el-table-column>
                <el-table-column sortable
                                 prop="s_birth"
                                 label="出生日期">
                </el-table-column>
                <el-table-column prop="s_native"
                                 label="籍贯">
                </el-table-column>
                <el-table-column prop="s_degree"
                                 label="学位">
                </el-table-column>
                <el-table-column prop="s_address"
                                 label="地址">
                </el-table-column>
                <el-table-column prop="s_phone"
                                 label="手机">
                </el-table-column>
                <el-table-column sortable
                                 prop="s_standing"
                                 label="工龄">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="search"
                                  size="mini"
                                  placeholder="输入姓名搜索" />        
                    </template>
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle v-on:click="editPerson(scope.row)" v-if="adminUser"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle v-on:click="deletePerson(scope.row.s_id)" v-if="adminUser"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="姓名" label-width="formLabelWidth">
                        <el-input v-model="form.s_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" label-width="formLabelWidth">
                        <el-input v-model="form.s_sex" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期" label-width="formLabelWidth">
                        <el-input v-model="form.s_birth" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="籍贯" label-width="formLabelWidth">
                        <el-input v-model="form.s_native" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学位" label-width="formLabelWidth">
                        <el-input v-model="form.s_degree" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" label-width="formLabelWidth">
                        <el-input v-model="form.s_address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" label-width="formLabelWidth">
                        <el-input v-model="form.s_phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="工资" label-width="formLabelWidth">
                        <el-input v-model="form.s_salary" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button v-on:click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" v-on:click="updateInfo">确 定</el-button>
                </div>
            </el-dialog>
        </template>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                tableData: [],
                search: "",
                cardId: "",
                dialogFormVisible: false,
                form: {
                    
                },
                adminUser: false,
            },
            created() {
                this.getEmployee();
                var a = localStorage.getItem('region');
                if (a == "管理员")
                    this.adminUser = true;
            },
            methods: {
                updateInfo() {
                    this.dialogFormVisible = false;
                    if (this.form.s_name == "" || this.form.s_sex == "" || this.form.s_birth == "" || this.form.s_native == "" || this.form.s_degree == "" || this.form.s_address == ""
                        || this.form.s_phone == "" || this.form.s_standing == "" || this.form.s_salary == "") {
                        alert("请输入完整的信息");
                    }
                    else if (isNaN(this.form.s_salary) || isNaN(this.form.s_standing)) {
                        alert("请输入正确的信息");
                    }
                    else if (this.form.s_sex != "男" && this.form.s_sex != "女") {
                        alert("请输入正确的性别信息");
                    }
                    else {
                        axios.post("/test/upSatff", { username: "admin", s: this.form })
                            .then(function (response) {
                                if (response.data)
                                    alert("修改成功");
                                else
                                    alert("修改失败");
                            });
                    }
                },
                editPerson(userinfo) {
                    console.log(userinfo);
                    this.form = userinfo;
                    this.dialogFormVisible = true;
                },
                deletePerson(deleteId){
                    axios.post("/test/deleteById", { username: "admin", id:deleteId })
                        .then(function (response) {
                            app.tableData = response.data;
                            alert("删除成功");
                        });
                },
                findPersonById(){
                    axios.post("/test/getStaffById", { ID: this.cardId })
                        .then(function (response) {
                            app.tableData = response.data;
                        });
                },
                getEmployee: function () {
                    axios.post("/test/getAllStaff")
                        .then(function (response) {
                            app.tableData = response.data;
                        });

                },
            },

        })
    </script>


</body>

